<nav> 
    <ul  id="menu-config">
        <li><a id="equipamentos">Equipmantos</a></li>
        <li><a id="usuarios">Usuarios</a></li>
        <li><a id="feriados">Feriados</a></li>    
    </ul>
</nav>
<br><br><br>
<div id="add-usuario">        
</div>
<span style="float:left;">
    <br>
    <br>
    &nbsp<big>Adicionar Novo</big>
</span>
<?php
echo $this->element('search-bar', array("options" => "Usuario,listar,Nome,250"));
?>
<div class="tabela">
    <table>
        <tr>        
            <th>Login</th>
            <th>Nome</th>
            <th>E-mail</th>
            <th>Telefone</th>        
            <th>Admin</th>
            <th>Opções</th>        
        </tr>    
        <?php foreach ($usuarios as $usuario): ?>    
            <tr>        
                <td>
                    <?php echo $usuario['Usuario']['user']; ?>
                </td>
                <td>
                    <?php echo $usuario['Usuario']['nome']; ?>
                </td>
                <td>
                    <?php echo $usuario['Usuario']['email']; ?>
                </td>
                <td>
                    <?php echo $usuario['Usuario']['telefone']; ?>
                </td>
                <td>
                    <?php
                    if ($usuario['Usuario']['acessoAdm'] == 0):
                        echo "<span>Não</span>";
                    else:
                        echo "<span>Sim</span> <img src=\"../img/admin.png\" width=\"17\">";
                    endif;
                    ?>
                </td>
                <td>
                    <span class="link-editar"><input type="hidden" value="<?php echo $usuario['Usuario']['id']; ?>">Editar</span>                     
                    <span class="link-bloquear">
                        <input class="id-user" type="hidden" value="<?php echo $usuario['Usuario']['id']; ?>">
                        <input class="ex-user" type="hidden" value="<?php echo $usuario['Usuario']['block']; ?>">
                        <?php
                        if ($usuario['Usuario']['block'] == 0):
                            echo "<img src=\"../img/lock.png\" width=\"20\"><span>Bloquear Acesso</span>";
                        else:
                            echo "<img src=\"../img/unlock.png\" width=\"20\"><span>Liberar Acesso</span>";
                        endif;
                        ?>
                    </span>
                </td>
            </tr>
        <?php endforeach; ?>
    </table>
</div>

<div id="formulario">    
</div>
<style>
    .tabela{
        width:980px;
        margin-left: -20px;
    }
    .link-editar{
        cursor: pointer;

        border: #75bdd1 double;
        padding: 2px;
        font-weight: 700;
        color: #F0F0F0;

        background: #2191c0;
    }
    .link-editar:hover{
        border: #367889 double;
        background: #75bdd1;
    }
    .link-bloquear{
        cursor: pointer;

        border: #a00 double;
        padding: 2px;
        font-weight: 600;
        color: #F0F0F0;

        background: #e52;
    }
    .link-bloquear:hover{
        border: #a00 double;
        background: lightcoral;
    }
    #add-usuario{
        background-image: url('../img/add/add02.png');
        background-size: 100%;

        width:70px;
        height: 70px;

        margin-left: -25px;        
        float:left;        

        cursor: pointer;
    }
</style>
<script>
    $('.link-editar').bind('click', function formularioEditar() {
        $.ajax({
            dataType: "html",
            url: '/calendarioweb/usuarios/editar/' + $(this).children().attr('value'),
            type: "POST",
            success: function(data) {
                $('#formulario').html(data),
                        $('#formulario').dialog({
                    title: 'Editar Usuario',
                    height: 640,
                    width: 450,
                    show: 'fade',
                    hide: 'fade',
                    draggable: false,
                    resizable: false,
                    modal: true
                });
            }
        });
    });

    $('.link-bloquear').bind('click', function formularioBloquear() {
        var urlId = $(this).children('.id-user').attr('value');
        var excluido = $(this).children('.ex-user');

        if (excluido.attr('value') == 1) {
            $(this).children('img').attr({src: '../img/lock.png'});
            $(this).children('span').text('Bloquear Acesso');
            excluido.val('0');
        } else {
            $(this).children('img').attr({src: '../img/unlock.png'});
            $(this).children('span').text('Liberar Acesso');
            excluido.val('1');
        }
        $.ajax({
            dataType: "html",
            url: '/calendarioweb/usuarios/bloquear/' + urlId,
            type: "GET"
        });
    });

    $('#add-usuario').bind('click', function() {
        $.ajax({
            dataType: "html",
            url: '/calendarioweb/usuarios/cadastrar',
            type: 'POST',
            success: function(data) {
                $('#formulario').html(data),
                        $('#formulario').dialog({
                    title: 'Cadastro de Novo Usuario',
                    height: 650,
                    width: 400,
                    show: 'fade',
                    hide: 'fade',
                    draggable: false,
                    resizable: false,
                    modal: true
                });
            }
        });
    });

    $('#equipamentos').bind('click', function() {
        window.self.location.href = '../equipamentos/listar';
    });

    $('#usuarios').bind('click', function() {
        window.self.location.href = '../usuarios/listar';
    });

    $('#feriados').bind('click', function() {
        window.self.location.href = '../feriados/listar';
    });
</script>